<template>
  <div class="marketChannel">
    <div class="common_bg"></div>
    <div class="marketChannel_container">
      

      <div class="list"
          v-for="(item, index) in channelList" :key="index"
      >
        <van-swipe-cell
          :name='item.customerId'
          :on-close="onClose">
          <van-cell :border="false" :title="item.customerRemark" />
          <template slot="right">
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>
      </div>

      
    </div>

    <div class="icon_place" @click="showAdd = true; addValue=''; "></div>


    <!-- 弹窗层 -->
    <van-dialog
      v-model="showAdd"
      title="添加渠道"
      show-cancel-button
      :beforeClose="beforeCloseDialog"
      class="dialog"
    >
      <van-field v-model="addValue" placeholder="请输入" />
    </van-dialog>
    <!-- 弹窗层 -->

  </div>
</template>

<style>
.marketChannel .list .van-cell-group{
  background: transparent;
}
.marketChannel .list {
  /* margin-bottom: .133333rem; */
  /* padding: .4rem .426667rem; */
}
/* .marketChannel  */

.marketChannel .van-swipe-cell__wrapper {
  display: flex;
  align-items: center;
}
.marketChannel .van-button{
  border-radius: 0;
}

</style>
<style scoped>

.marketChannel .common_bg {
  height: 1.673333rem;
}
.marketChannel_container {
  position: relative;
  padding-top: 1rem;
}


.marketChannel .list {
  margin-top: .133333rem;
}




</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("marketChannel");


export default {
  name: 'marketChannel',
  data() {
    return {
      jwtAuth: {},
      showAdd: false,
      addValue: '',
      channelList: [
      ]
    }
  },
  created() {
    this.initData();
   
  },
  mounted() {
   
  },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    initData() {
      this.post({
        API: 'selectBmCustomerPageList',
        data: {}
      }).then(res => {
        this.channelList = res
      })
    },

    add() {
      let data = {
        customerRemark: this.addValue
      }

      this.post({
        API: 'insert',
        data: data
      }).then(res => {
        this.$notify({ type: 'success', message: '新增成功',duration: 1200 });
        this.initData();
      })
    },


    beforeCloseDialog(action, done) {
      if (action === 'confirm') {
        if(this.addValue == '') {
          done()
        }else{
          this.add();
        }
        done();
      } else {
        done();
      }
    },

    onClose(clickPosition, instance, detail) {
      switch (clickPosition) {
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            this.delete(detail);
            instance.close();
          }).catch(() => {
            instance.close();
          });
          break;
      }
    },

    delete(detail) {
      this.formGet({
        API: 'deleteById',
        data: {
          id: detail.name
        }
      }).then(res => {
        this.$notify({ type: 'success', message: '删除成功',duration: 1200 });
        this.initData();
      }).catch(err => {
        this.$toast.fail(err);
      })
    },




    
    
  },
  computed: {
    ...mapState([
    ]),
   
  },
  components: {
  },
}

</script>